<template>
  <div style="margin: 50px 0">
    <h1>vue-router 路由测试</h1>
    <div id="nav">
      <ul>
        <li>
          <router-link to="/">home</router-link>
        </li>
        <li>
          <router-link to="/about">about us</router-link>
        </li>
        <li>
          <router-link to="/test">test</router-link>
        </li>
        <li>
          <router-link to="/publish">信息发布平台</router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  // import Router from 'vue-router'
  export default {
    name: "Nav",
    created () {
      alert("created")
    },
    destroyed () {
      alert("destroyed")
    }
  }
</script>

<style scoped>
  #nav {
    width: 100%;
    height: 60px;
    background-color: aquamarine;
  }
  ul {
    width: 40%;
    height: 60px;
    margin: 0 auto;
  }
  li {
    width: 25%;
    height: 30px;
    font-size: larger;
    text-decoration: none;
    list-style-type: none;
    float: left;
    padding-top: 20px;
  }
</style>
